<template>
  <div id="add_menu">
    <el-form
    size="mini"
      ref="form"
      :model="form"
      :rules="customRule"
    >
      <el-form-item
        label="菜单名称"
        prop="label"
      >
        <el-input
          v-model="form.label"
          placeholder="请输入1-20个字符"
          :maxlength="20"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="路由"
        prop="route"
      >
        <el-input
          v-model="form.route"
          placeholder="请输入唯一路由"
          :maxlength="20"
        ></el-input>
      </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="form.icon" placeholder="请根据应用填写图标类"></el-input>
        </el-form-item>
      <el-form-item
        label="菜单类型"
        prop="type"
      >
        <br />
        <el-radio-group
          v-model="form.type"
          @change="typeChange"
        >
          <el-radio-button :label="1">一级菜单</el-radio-button>
          <el-radio-button :label="2">二级菜单</el-radio-button>
          <el-radio-button :label="3">三级菜单</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="父级菜单"
        prop="pid"
        v-if="form.type!=1"
        filterable
      >
      <el-select v-model="form.pid" placeholder="请选择" v-if="form.type==2">
<el-option
      v-for="item in parentTree"
      :key="item.id"
      :label="item.label"
      :value="item.id">
      <span style="float: left">{{ item.label }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.route }}</span>
    </el-option>
      </el-select>
        <select-tree :options="parentTree" @change="setPid" v-if="form.type==3"></select-tree>
      </el-form-item>
      <el-form-item
        label="权限验证"
        prop="is_auth"
      >
        <br />
        <el-switch
          :activeValue="1"
          :inactiveValue="0"
          style="
          display:
          block"
          v-model="form.is_auth"
        >
        </el-switch>
      </el-form-item>
      <el-form-item
        label="权限"
        prop="permissions"
        v-if="form.is_auth"
      >
        <br />
        <el-tree
          @check="permission_change"
          :default-checked-keys="form.permissions"
          node-key="id"
          :props="tree_props"
          :data="permission_tree"
          show-checkbox
        >
        </el-tree>
      </el-form-item>
      <el-form-item
        label="角色"
        prop="roles"
        v-if="form.is_auth"
      >
        <br />
        <el-transfer
          filterable
          v-model="form.roles"
          :data="roleList"
          :props="transfer.props"
          :titles="transfer.titles"
          :buttonTexts="transfer.buttonText"
        >
          <span slot-scope="{ option }">{{ option.display_name }}<span class="red">【{{option.name}}】</span></span>

        </el-transfer>
      </el-form-item>
      <el-form-item
        label="排序"
        prop="sort"
      >
        <el-input-number
          v-model="form.sort"
          :max="1000"
          :min="-1"
          :step="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item
        label="状态"
        prop="status"
      >
        <el-switch
        :activeValue="1"
          :inactiveValue="0"
          style="display: block"
          v-model="form.status"
        >
        </el-switch>
      </el-form-item>
      <el-form-item class="text-center">
        <el-button
          @click="submit('form')"
          :loading="btnload"
        >提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { permissionTree, roleList, menuSelect, addMenu } from "@/api";
import selectTree from "@/components/selectTree/selectTree";
export default {
  components: { selectTree },
  data() {
    return {
      btnload: false,
      tree_props: {
        label: "display_name",
        children: "children"
      },
      parentTree: [],
      roleList: [],
      transfer: {
        titles: ["未选择", "已选择"],
        buttonText: ["移除", "添加"],

        props: {
          key: "id",
          label: "display_name"
        }
      },
      permission_tree: [],
      form: {
        label: "",
        route: "",
        type: 1,
        is_auth: 1,
        permissions: [],
        roles: [],
        pid: 0,
        sort: 99,
        status: 1,
        icon: "",
        menu_group_id:0
      },
      customRule: {
        label: [
          { required: true, message: "菜单名称", trigger: "blur" },
          { max: 50, min: 1, message: "唯一标识为1到20位字符", trigger: "blur" }
        ],
        route: [
          { required: true, message: "路由", trigger: "blur" },
          { max: 50, min: 1, message: "路由为1到20位字符", trigger: "blur" }
        ],
        type: [
          {
            required: true,
            message: "类型",
            trigger: "blur"
          }
        ]
      }
    };
  },
  props:["pdata"],
  created() {
    this.form.pid = this.pdata.pid
    permissionTree(
      res => {
        this.permission_tree = res.data.tree;
      },
      err => {}
    );
    roleList(
      {},
      res => {
        this.roleList = res.data;
      },
      err => {
        this.loading = false;
      }
    );
  },
  methods: {
    permission_change(data, checked) {
      this.form.permissions = checked.checkedKeys;
    },
    typeChange(value) {
      if(value==1){
        this.form.pid = 0;
        return true;
      }else{
        this.form.pid = ""
      }
      let data = {
        gid:this.pdata.gid,
        type:value
      }
      menuSelect(
        data,
        res => {
          this.parentTree = res.data;

        },
        err => {}
      );
    },
    setPid(val){
      this.form.pid = val;
    },
    submit(data) {
      this.$submit(this, data, () => {
        this.btnload = true;
        this.form.menu_group_id = this.pdata.gid
        addMenu(
          this.form,
          res => {
            this.btnload = false;
            this.$emit("close", res);
          },
          err => {
            this.btnload = false;
          }
        );
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
